var GLPres = {};

GLPres.data = {};
GLPres._curr_x = -2;
GLPres._curr_y = -2;

GLPres._curr_pres = "test";

GLPres.templates = {
	"gbox" : '<div class="gbox" id="gbox_%(x)s_%(y)s" onmouseover="GLPres.box_hover(%(x)s,%(y)s)" onmouseout="GLPres.box_out(%(x)s,%(y)s)" onclick="GLPres.box_click(%(x)s,%(y)s)"></div>',
	"newbox" : '<div class="newbox"></div>',
	"label" : '<div class="gbox_label" id="gbox_label_%(y)s" onclick="GLPres.set_row(%(y)s)"></div>'
};

GLPres.init = function ( dev_box )
{
	var f = new liwe.form.instance ( "props" );
	var opts = [
		{ label: "Text", value: "text" },
		{ label: "Image", value: "image" },
		{ label: "Click", value: "click" }
	];

	f.text ( { label: "Nome", name: "name", size: 20, maxlength: 100, colspan: 5 } );
	f.select ( { label: "Tipo", name: "kind", options: opts, force_select: true, colspan: 5 } );
	f.text ( { label: "Valore", name: "value", size: 20, maxlength: 100, colspan: 5 } );
	f.sep ();

	f.text ( { label: "label", name: "label", size: 20, maxlength: 100, nonl: false, colspan: 5 } );
	f.number ( { label: "X", name: "x", size: 4, maxlength: 3, nonl: true } );
	f.number ( { label: "Y", name: "y", size: 4, maxlength: 3, nonl: false } );
	f.number ( { label: "opacity", name: "o", size: 2, maxlength: 1, nonl: false } );
	f.text ( { label: "scale", name: "scale", size: 4, maxlength: 3, nonl: true } );
	f.text ( { label: "rot", name: "rotate", size: 4, maxlength: 3, nonl: false } );

	f.sep ();
	f.button ( { value: "Load from DB", onclick: "GLPres.load_db()" } );
	f.button ( { value: "Save on DB", onclick: "GLPres.save_db()" } );

	f.set ( dev_box );
};

GLPres.create = function ( dest_div, x_max, y_max )
{
	var y, x;
	var res = new String.buffer ();
	var d = {};

	$( dest_div ).style.width = ( ( x_max + 2 ) * 22 ) + ( 184 ) + "px";
	$( dest_div ).style.height = ( ( y_max + 2 ) * 22 ) + "px";

	for ( y = 0; y < y_max; y ++ )
	{
		d [ "y" ] = y;
		res.add ( String.formatDict ( GLPres.templates [ 'label' ], d ) );

		for ( x = 0; x < x_max; x ++ )
		{
			d [ 'x' ] = x;
			d [ 'y' ] = y;
				
			res.add ( String.formatDict ( GLPres.templates [ 'gbox' ], d ) );
		}
		res.add ( GLPres.templates [ 'newbox' ] );
	}

	$( dest_div, res.toString () );
};

GLPres.set_row = function ( y )
{
	var f = liwe.form.get ( "props" );

	GLPres._row_change ();

	GLPres._set_top_form ( y );

	GLPres._curr_x = -1;
	GLPres._curr_y = y;

	f.clear ();

	GLPres._set_top_form ( y );

	console.debug ( "Current row: %o", y );
};

GLPres._row_change = function ()
{
	if ( GLPres._curr_x == -2 ) return;

	if ( GLPres._curr_x == -1 ) GLPres._save_top ();

	if ( GLPres._curr_x >= 0 )
		GLPres._save_data ();
};

GLPres._save_top = function ()
{
	var f = liwe.form.get ( "props" );
	var cell = GLPres._get_cell ( GLPres._curr_x, GLPres._curr_y );

	cell [ 'name' ] = f.get_value ( "name" );
	cell [ 'kind' ] = f.get_value ( "kind" );
	cell [ 'value' ] = f.get_value ( "value" );

	GLPres._set_cell ( GLPres._curr_x, GLPres._curr_y, cell );
};

GLPres._save_data = function ()
{
	var f = liwe.form.get ( "props" );
	var cell = GLPres._get_cell ( GLPres._curr_x, GLPres._curr_y );

	cell [ 'label' ] = f.get_value ( "label" );
	cell [ 'x' ] = f.get_value ( "x" );
	cell [ 'y' ] = f.get_value ( "y" );
	cell [ 'opacity' ] = f.get_value ( "o" );
	cell [ 'scale' ] = f.get_value ( "scale" );
	cell [ 'rotate' ] = f.get_value ( "rotate" );

	cell [ '_click' ] = 0;
	GLPres._set_cell ( GLPres._curr_x, GLPres._curr_y, cell );

	GLPres.box_out ( GLPres._curr_x, GLPres._curr_y );
};

GLPres._set_top_form = function ( y )
{
	var cell = GLPres._get_cell ( -1, y );
	var f = liwe.form.get ( "props" );

	f.set_value ( "name", cell.get ( "name", "NO NAME" ) );
	f.set_value ( "kind", cell.get ( "kind", "" ) );
	f.set_value ( "value", cell.get ( "value", "" ) );
};

GLPres._set_data_form = function ( x, y )
{
	var cell = GLPres._get_cell ( x, y );
	var f = liwe.form.get ( "props" );

	f.set_value ( "x", cell.get ( "x", "" ) );
	f.set_value ( "y", cell.get ( "y", "" ) );
	f.set_value ( "o", cell.get ( "o", "" ) );
	f.set_value ( "scale", cell.get ( "scale", "" ) );
	f.set_value ( "rotate", cell.get ( "rotate", "" ) );
};

GLPres.box_hover = function ( x, y )
{
	// console.debug ( "OVER: %s %s", x, y );
	$( "gbox_" + x + "_" + y ).style.backgroundColor = "blue";
};

GLPres.box_out = function ( x, y )
{
	var cell = GLPres._get_cell ( x, y );
	var col = "white";
/*
	var dead = 0xDEADBEEF;

	if ( ( cell.get ( "x", dead ) != dead ) || 
	     ( cell.get ( "y", dead ) != dead ) || 
	     ( cell.get ( "o", dead ) != dead ) || 
	     ( cell.get ( "scale", dead ) != dead ) || 
	     ( cell.get ( "rotate", dead ) != dead ) )
		col = "#ffcccc";
*/

	if ( ( cell.get ( "x" ) ) || 
	     ( cell.get ( "y" ) ) || 
	     ( cell.get ( "o" ) ) || 
	     ( cell.get ( "scale" ) ) || 
	     ( cell.get ( "rotate" ) ) )
	{
		col = "#ffcccc";
	}

	if ( cell.get ( "_click" ) )
		col = "#ccffcc";

	// console.debug ( "OVER: %s %s", x, y );
	$( "gbox_" + x + "_" + y ).style.backgroundColor = col;
};

GLPres.box_click = function ( x, y )
{
	var cell = GLPres._get_cell ( x, y );

	GLPres._row_change ();

	GLPres._curr_x = x;
	GLPres._curr_y = y;

	cell [ '_click' ] = 1;

	GLPres._set_top_form ( y );
	GLPres._set_data_form ( x, y );

	GLPres._set_cell ( x, y, cell );
};

GLPres._get_cell = function ( x, y )
{
	var cell = GLPres.data.get ( x + "-" + y, {} );

	return cell;
};

GLPres._set_cell = function ( x, y, cell )
{
	GLPres.data [ x + "-" + y ] = cell;
};

GLPres.save_db = function  ()
{
	if ( ! supports_html5_storage () )
	{
		alert ( "Your browser does not support HTML5 storage" );
		return;
	}

	GLPres.data.iterate ( function ( v, k ) 
	{
		console.debug ( "K: %s - V: %o", k, v );
		localStorage [ "GLPres." + GLPres._curr_pres + "." + k ] = 1; // uneval ( v );
	} );
	
};

GLPres.load_db = function ()
{
	if ( ! supports_html5_storage () )
	{
		alert ( "Your browser does not support HTML5 storage" );
		return;
	}

	var s = localStorage;

	console.debug ( "Storage: %o", s );
	console.debug ( "Storage: %o", s [ 'GLPres.test.0-0' ] );

};

function supports_html5_storage() 
{
	try {
		return 'localStorage' in window && window['localStorage'] !== null;
  	} catch ( e ) {
    		return false;
  	}
}
